import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入组件
// 它只要写文件夹，就会自动找到里面的index.vue
// import login from '../views/Login'
// // 找到layout组件
// import layout from '../views/Layout'
// // 导入layout里的子路由
// import home from '../views/Layout/views/home'
// import ask from '../views/Layout/views/ask'
// import video from '../views/Layout/views/video'
// import user from '../views/Layout/views/user'
// import edit from '../views/Layout/views/user/edit'
// import chat from '../views/Layout/views/user/chat'
// // 导入404页面
// import NotFound from '../views/NotFound'
// import Search from '../views/Search'
// import result from '../views/Search/result'
// import article from '../views/Article'


// 路由懒加载形式：const Foo = () => import('./Foo.vue')
const login = () => import('../views/Login')
// 找到layout组件
const layout = () => import('../views/Layout')
// 导入layout里的子路由
const home = () => import('../views/Layout/views/home')
const ask = () => import('../views/Layout/views/ask')
const video = () => import('../views/Layout/views/video')
const user = () => import('../views/Layout/views/user')
const edit = () => import('../views/Layout/views/user/edit')
const chat = () => import('../views/Layout/views/user/chat')
// 导入404页面
const NotFound = () => import('../views/NotFound')
const Search = () => import('../views/Search')
const result = () => import('../views/Search/result')
const article = () => import('../views/Article')

const routes = [

  // 路径为/就相当于你没有输后面的路径
  // 现在需要你路径为/或者说没输路径就跳转到 /home
  // redirect是写路径不是写组件，代表重定向到哪个路径
  { path: "/", redirect: '/home' },
  { path: "/login", component: login },
  { path: "/search", component: Search },
  { path: "/search/result", component: result },
  { path: "/user/chat", component: chat },
  { path: "/article", component: article },
  {
    path: "/layout",
    component: layout,
    children: [
      // 子路由路径加 / 那样就能直接写路径访问子路由，而不用写父路径
      { path: '/home', component: home, meta: { needKeep: true } },
      { path: '/ask', component: ask },
      { path: '/video', component: video },

      // 因为user需要登录才能访问，所以给user打个标签
      {
        path: '/user',
        component: user,
        meta: {
          needLogin: true,
          needUser: true
        }
      },
    ]
  },
  {
    path: '/user/edit',
    component: edit,
    meta: {
      needLogin: true,
      needUser: true
    }
  },

  { path: '/NotFound', component: NotFound },
  // 匹配除了上面这些路径以外的所有路径
  { path: '*', redirect: '/NotFound' },
]

const router = new VueRouter({
  routes
})

import store from '../store'
import { Toast } from 'vant'
import { userInfo } from '../api/user'
// 给router加导航守卫钩子
router.beforeEach((to, from, next) => {

  // 该判断要去的页面是不是需要登录的页面 
  if (to.meta.needLogin) {
    // 如果有这个标签，代表需要登录
    // 判断它有没有登录(判断有没有token)
    // console.log('守卫里', store.state.token)
    if (store.state.token.token) {

      // 允许访问之前再判断去的页面是不是需要用户信息数据的页面
      if (to.meta.needUser) {

        if (!store.state.userInfo.name) {
          // 发请求
          userInfo().then((res) => {

            // 把请求来的用户数据存到vuex里面
            store.commit("saveUserInfo", res.data.data);
          });
        }
      }

      // 允许访问了
      next()
    } else {

      // 提示用户请先登录
      Toast.fail('请先登录')
      // 没登录，打回登录页，我就需要携带参数
      // 参数指定是从哪个页面打回的，我怎么获取到从哪个页面打回？？？
      // 用什么获取？用to，因为to是我们即将要去的页面，但是因为这个页面没有登录不给访问
      // 所以打回到登录页，那么成功以后自然而然就应该回到我们即将要去的页面，也就是回到to
      // next('/login')
      next({
        path: '/login',
        query: {
          back: to.path // 把我要去的页面的路径作为参数
        }
      })
    }
  } else {
    // 没有这个标签的代表可以直接访问
    next()
  }
})

// 这里导入的其实是VueRouter这个构造函数，而不是router对象
const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location, onResolve, onReject) {

  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  // 捕捉错误，如果报错，就进到catch,但是catch里毛都没做，就相当于把错误给吞了
  // 给吞了，报错就不会弹出来
  return originalPush.call(this, location).catch(err => err)
}


export default router
